.vk-switch {
	--vk-switch-on-color: var(--vk-color-primary);
	--vk-switch-off-color: var(--vk-border-color);
	--vk-switch-on-border-color: var(--vk-color-primary);
	--vk-switch-off-border-color: var(--vk-border-color);
}

.vk-switch {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 20px;
	height: 32px;
	.vk-switch__input {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
		&:focus-visible {
			& ~ .vk-switch__core {
				outline: 2px solid var(--vk-switch-on-color);
				outline-offset: 1px;
			}
		}
	}
	&.is-disabled {
		opacity: 0.6;
		.vk-switch__core {
			cursor: not-allowed;
		}
	}
	&.is-checked {
		.vk-switch__core {
			border-color: var(--vk-switch-on-border-color);
			background-color: var(--vk-switch-on-color);
			.vk-switch__core-action {
				left: calc(100% - 17px);
			}
			.vk-switch__core-inner {
				padding: 0 18px 0 4px;
			}
		}
	}
}
.vk-switch--large {
	font-size: 14px;
	line-height: 24px;
	height: 40px;
	.vk-switch__core {
		min-width: 50px;
		height: 24px;
		border-radius: 12px;
		.vk-switch__core-action {
			width: 20px;
			height: 20px;
		}
	}
	&.is-checked {
		.vk-switch__core .vk-switch__core-action {
			left: calc(100% - 21px);
			color: var(--vk-switch-on-color);
		}
	}
}
.vk-switch--small {
	font-size: 12px;
	line-height: 16px;
	height: 24px;
	.vk-switch__core {
		min-width: 30px;
		height: 16px;
		border-radius: 8px;
		.vk-switch__core-action {
			width: 12px;
			height: 12px;
		}
	}
	&.is-checked {
		.vk-switch__core .vk-switch-core-action {
			left: calc(100% - 13px);
			color: var(--vk-switch-on-color);
		}
	}
}
.vk-switch__core {
	display: inline-flex;
	align-items: center;
	position: relative;
	height: 20px;
	min-width: 40px;
	border: 1px solid var(--vk-switch-off-border-color);
	outline: none;
	border-radius: 10px;
	box-sizing: border-box;
	background: var(--vk-switch-off-color);
	cursor: pointer;
	transition: border-color var(--vk-transition-duration),
		background-color var(--vk-transition-duration);
	.vk-switch__core-action {
		position: absolute;
		left: 1px;
		border-radius: var(--vk-border-radius-circle);
		width: 16px;
		height: 16px;
		background-color: var(--vk-color-white);
		transition: all var(--vk-transition-duration);
	}
	.vk-switch__core-inner {
		width: 100%;
		transition: all var(--vk-transition-duration);
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		padding: 0 4px 0 18px;
		.vk-switch__core-inner-text {
			font-size: 12px;
			color: var(--vk-color-white);
			user-select: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
